<template>
    <br><br>
    <hr>
    <h3>发布评论</h3>
    <textarea  v-model="message" :placeholder="placeholder" name="comment" id="comment-area" cols="90" rows="10"></textarea>

    <div><button @click="submit" class="submitBtn">发布</button></div>
    <br>
    <p>已有 {{ comments.length }} 条评论</p>
    <hr>

    <!-- 渲染所有评论内容 -->
    <div v-for="comment in comments" :key="comment.id">
        <div class="comments">
            <div>
                <span class="username">
                    {{ comment.author.username }}
                </span>
                于
                <span class="created">
                    {{ formatted_time(comment.created) }}
                </span>
                <span v-if="comment.parent">
                    对
                    <span class="parent">
                        {{ comment.parent.author.username }}
                    </span>
                </span>
                说道：
            </div>
            <div class="content">
                {{ comment.content }}
            </div>
            <div>
                <button class="commentBtn" @click="replyTo(comment)">回复</button>
            </div>
        </div>
        <hr>
    </div>
</template>

<script>
    import axios from 'axios';
    import authorization from '@/utils/authorization';

    export default {
        name: 'Comments',
        // 通过props 获取当前文章
        props: { article: Object },
        data: function(){
            return {
            // 所有评论
            comments: [],
            // 评论控件绑定的文本和占位符
            message: '',
            placeholder: '说点啥吧...',
            // 评论的评论
            parentID: null
            }
        },
        // 监听 article对象-以便实时更新评论
        watch: {
            article(){
                this.comments = this.article !== null ? this.article.comments : []
            }
        },
        methods: {
            // 提交评论
            submit(){
                const that = this;
                authorization()
                    .then(function(response){
                        if(response[0]){
                            axios
                                .post('/api/comment/',
                                    {
                                        content: that.message,
                                        article_id: that.article.id,
                                        parent_id: that.parentID,
                                    },
                                    {
                                        headers: { Authorization: 'Bearer ' + localStorage.getItem('access.myblog') }
                                    }
                                )
                                .then(function(response){
                                    // 将新评论添加到顶部
                                    that.comments.unshift(response.data);
                                    that.message = '';
                                    alert('留言成功')
                                })
                        }
                        else {
                            alert('请登录后评论！')
                        }
                    })
            },
            // 对某条评论进行评论-二级评论
            replyTo(comment){
                this.parentID = comment.id;
                this.placeholder = '对' + comment.author.username + '说:'
            },
            // 修改日期显示格式
            formatted_time: function(iso_date_string){
                const date = new Date(iso_date_string);
                return date.toLocaleDateString()+ '  ' + date.toLocaleTimeString()
            },
        }
    }

</script>

<style scoped>
  button {
    cursor: pointer;
    border: none;
    outline: none;
    color: whitesmoke;
    border-radius: 5px;
  }
  .submitBtn {
    height: 35px;
    background: steelblue;
    width: 60px;
  }
  .commentBtn {
    height: 25px;
    background: lightslategray;
    width: 40px;
  }
  .comments {
    padding-top: 10px;
  }
  .username {
    font-weight: bold;
    color: darkorange;
  }
  .created {
    font-weight: bold;
    color: darkblue;
  }
  .parent {
    font-weight: bold;
    color: orangered;
  }
  .content {
    font-size: large;
    padding: 15px;
  }
</style>